<!--  -->
<template>
  <div class="anov-chip-load">
    <div class="anov-modal-icon-wrapper">
      <div class="anov-modal-circle-o"></div>
      <div class="anov-modal-circle-i"></div>
      <i class="platformicon icon_jinggao anov-modal-icon"></i>
    </div>
    <div class="anov-chip-load-wrapper">
      <p class="anov-chip-label">{{ $t('chip.authorization') }}</p>
      <!-- <div class="anov-chip-textarea" ref="textarea-value" v-html='params.content'></div> -->
      <div class="anov-chip-textarea" ref="textarea-value"></div>
    </div>
    <div class="anov-modal-btn" @click="validBtn">
      {{ $t('cmlpanel.confirm') }}
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import EventBus from '@/assets/js/app/cmlpanel/util/bus.js'
import * as anov from 'anov-core'
export default {
  name: 'chip-load',
  components: {},
  props: ['data'],
  data() {
    return {
      params: {
        type: '',
        content: ''
      }
    }
  },
  watch: {
    data: {
      handler: function () {
        this.params = this.data
      },
      // modified by WUYAX @2021-07-23
      immediate: true
    }
  },

  methods: {
    loadInfo() {
      this.$refs['textarea-value'].style.opacity = 1
      this.$refs['textarea-value'].innerHTML = this.params.content
      let mySplitText = new SplitText(this.$refs['textarea-value'], {
        type: 'chars'
      })
      var tl = new TimelineLite()
      tl.add('hear', '+=0')
      tl.staggerFrom(
        mySplitText.chars,
        0.5,
        { opacity: 0, scale: 0.8, ease: Power4.easeOut },
        0.02,
        'hear'
      )
      // tl.staggerTo(mySplitText.chars, 0.5, {color:"rgba(36,224, 231,1)", ease:Power4.easeOut}, 0.02, "hear+=0.1");
      tl.staggerTo(
        mySplitText.chars,
        0.5,
        { opacity: 1, ease: Power4.easeOut },
        0.02,
        'hear+=0.1'
      )
      //TweenMax.staggerFrom(mySplitText.chars, 1, {scale:4, autoAlpha:0,  rotationX:-180,  transformOrigin:"100% 50%", ease:Back.easeOut}, 0.01);
    },
    init() {
      this.$refs['textarea-value'].style.opacity = 0
      let _this = this
      this.tl = new TimelineMax({
        autoRemoveChildren: true,
        onStart: function () {}
      })
      let tw1 = TweenMax.to('.anov-chip-load', 0.3, { opacity: 1 })
      let tw4 = TweenMax.to('.anov-chip-load .anov-modal-icon-wrapper', 0.3, {
        scale: 1,
        opacity: 1,
        ease: Power0.easeInOut
      })
      let tw5 = TweenMax.to('.anov-chip-load .anov-modal-icon', 0.2, {
        opacity: 1,
        scale: 1
      })
      let tw8 = TweenMax.to('.anov-chip-load .anov-chip-load-wrapper', 0.3, {
        opacity: 1
      })
      let tw9 = TweenMax.to('.anov-chip-load .anov-modal-btn', 0.3, {
        opacity: 1
      })
      this.tl.addLabel('start')
      this.tl
        .add(this.loadInfo, 'start+=0')
        .add(tw1, 'start+=0')
        .add(tw4, 'start+=0.1')
        .add(tw5, 'start+=0.2')
        .add(tw8, 'start+=.4')
        .add(tw9, 'start+=.4')
      return this.tl
    },
    reset() {
      this.tl.reverse()
      TweenMax.set('.anov-chip-load', { opacity: 0 })
      TweenMax.set('.anov-chip-load .anov-modal-icon-wrapper', {
        scale: 0,
        opacity: 0
      })
      TweenMax.set('.anov-chip-load .anov-modal-icon', { opacity: 0, scale: 0 })
      TweenMax.set('.anov-chip-load .anov-modal-text', { opacity: 0 })
      TweenMax.set('.anov-chip-load .anov-modal-btn', { opacity: 0 })
    },
    destroy() {
      this.reset()
    },
    inputChange(e) {
      this.textValue = e.target.value
    },
    validBtn() {
      TweenMax.to('.anov-valid-error', 0.3, { opacity: 0, height: 0 })
      TweenMax.to('.anov-chip-load .anov-modal-btn', 0.3, { opacity: 1 })
      EventBus.$emit('closeModal', {
        noticeType: 'modal',
        componentsName: 'chipLoad'
      })
      //存储code到运行时
      //   let search = window.location.href.split('?')[1] || ''
      //   search = search.split('#')[0]
      //   search += 'license.code=' + anov.licenseServer.code
      //   window.location.search = search
      let url = this.changeURLPar(
        window.location.href,
        'license.code',
        app.config.license.code
      )
      window.location.search = url.split('?')[1]
    },
    changeURLPar(destiny, par, par_value) {
      var pattern = par + '=([^&]*)'
      var replaceText = par + '=' + par_value
      if (destiny.match(pattern)) {
        var tmp = '/\\' + par + '=[^&]*/'
        tmp = destiny.replace(eval(tmp), replaceText)
        return tmp
      } else {
        if (destiny.match('[?]')) {
          return destiny + '&' + replaceText
        } else {
          return destiny + '?' + replaceText
        }
      }
      return destiny + '\n' + par + '\n' + par_value
    }
  },

  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.anov-chip-label {
  font-size: 30px;
}
.anov-chip-load {
  opacity: 0;
}
.anov-chip-load-wrapper {
  margin-top: 20px;
  text-align: center;
}
.anov-chip-textarea {
  width: 100%;
  padding: 5px;
  min-height: 100px;
  margin-top: 20px;
  line-height: 30px;
  // background: rgba(0,0,0, .8);
  font-size: 20px;
  height: 300px;
  overflow-y: scroll;
  opacity: 0;
  color: rgb(38, 223, 241);
  padding: 30px 50px;
  perspective: 100;
}
.anov-chip-error {
  height: 0;
  opacity: 0;
}
.get-valid {
}
</style>
